<template>
    <div class="wrapper">
        <div class="wrapperin">
            <div class="header">
                <div class="inner">
                    <div class="info" v-show="token">
                        <div>
                            <span class="name" @click="$router.push('/account/myInfo')">{{ userInfo.name }}</span>
                            <img v-show="imgUrl" @click="$router.push('/account/level')" :src="imgUrl" alt="">
                        </div>
                        <div v-show="userInfo.userGrade!='0'">
                            <span class="time">{{ time || ' '}}</span>
                            <span class="btn" @click="toPurchase('1')" v-show="isShow"><span>立即续费</span></span>
                        </div>
                    </div>
                    <div class="info" v-show="!token" @click="toHref">登录/注册</div>
                    <div class="photo" @click="toHref('/account/myInfo')">
                        <img :src="userInfo.photo || 'static/default-headImg.png'">
                    </div>
                    <div class="laba" @click="toHref('/account/message')">
                        <img src="../../assets/laba.png">
                        <span v-show="userInfo.userMessage&&userInfo.userMessage!='0'"></span>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="swiper">
                    <swiper :options="swiperOption" ref="mySwiper">
                        <swiper-slide v-for="(item,index) in gradeList" :key="index">
                            <div class="img">
                                <img :src="`static/level-${item.grade}.png`">
                                <div class="imgText">
                                    <div class="level">{{item.name}}</div>
                                    <div class="bottom">
                                        <div class="number">{{item.price | filterToThousands}}</div>
                                        <div class="time">有效期{{item.validity}}个月</div>
                                    </div>
                                </div>
                            </div>
                            <div class="info" :class="`level${item.grade}`">
                                <img :src="require(`../../assets/level-${item.grade}-huo.png`)" alt="">
                                <span class="su">{{item.multiple}}倍速</span>
                                <span class="btn" @click="toPurchase('2',item.grade)"><span>立即加速</span></span>
                            </div>
                        </swiper-slide>
                    </swiper>
                </div>
                <div class="dataPanel">
                    <div class="panel">
                        <div class="panel-item">
                            <div>今日挖宝</div>
                            <div>{{userInfo.everyDayDlb || '0'}}RB</div>
                        </div>
                        <div class="panel-item">
                            <div>今日文章</div>
                            <div>{{userInfo.everyDayReadNumer || '0'}}</div>
                        </div>
                        <div class="panel-item">
                            <div>今日视频</div>
                            <div>{{userInfo.everyDayVideoNumber || '0'}}</div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <mt-cell title="钱包" icon="more" is-link  @click.native="toHref('/account/wallet')">
                        <img slot="icon" class="icon" src="../../assets/icon-wallet.png" alt="">
                    </mt-cell>
                    <mt-cell title="邀请好友" icon="more" is-link @click.native="toHref('/account/invite')">
                        <img slot="icon" class="icon" src="../../assets/icon-yao.png" alt="">
                    </mt-cell>
                    <mt-cell title="实名认证" icon="more" :is-link="userInfo.realState == '1'|| userInfo.realState == '4'"  @click.native="toRealName">
                        <img slot="icon" class="icon" src="../../assets/icon-card.png" alt="">
                        <span>{{userInfo.realStateValue}}</span>
                    </mt-cell>
                    <mt-cell title="设置" icon="more" class="no-border" is-link  @click.native="toHref('/account/setting')">
                        <img slot="icon" class="icon" src="../../assets/icon-set.png" alt="">
                    </mt-cell>
                </div>
            </div>
        </div>
        <tabbar/>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import tabbar from "@/components/Tabbar/index"
import { parseTime, toThousands } from "@/utils/index"
import cache from '@/utils/cache'
import { RefreshToken } from '@/api/login.js'
export default {
    data(){
        return{
            token: '',
            userInfo: {},
            imgUrl: '',
            gradeList:[
                {
                    id: 2,                //id
                    grade: '1',           //等级
                    name: "青铜发动机",    //等级名称
                    price: 2500,         //价格
                    validity: 4,          //有效期
                    multiple: 3,          //阅读倍数
                    readDivide:20,         //下线阅读分成(百分比)
                    invitationNumber: 5,  //邀请码数量
                    buyDivide: 20         //下线购买奖励(百分比)
                },
                {
                    id: 3,                //id
                    grade: '2',           //等级
                    name: "白银发动机",    //等级名称
                    price: 5000,         //价格
                    validity: 6,          //有效期
                    multiple: 6,          //阅读倍数
                    readDivide:20,         //下线阅读分成(百分比)
                    invitationNumber: 10,  //邀请码数量
                    buyDivide: 20         //下线购买奖励(百分比)
                },
                {
                    id: 4,                //id
                    grade: '3',           //等级
                    name: "黄金发动机",    //等级名称
                    price: 10000,         //价格
                    validity: 8,          //有效期
                    multiple: 12,          //阅读倍数
                    readDivide:20,         //下线阅读分成(百分比)
                    invitationNumber: 20,  //邀请码数量
                    buyDivide: 20         //下线购买奖励(百分比)
                }
            ],
            swiperOption: {
                initialSlide: 1,
                speed: 1000,
                slidesPerView: 'auto',
                centeredSlides: true
            },
            time: '',
            curLevel: '',
            curGrade:{},
            isShow:false
        }
    },
    components:{
        tabbar
    },
    filters:{
        filterToThousands(num){
            return toThousands(num)
        }
    },
    mounted(){
        this.swiper.slideTo(1, 0, false)
    },
    activated(){
        this.token = cache.getLocal('token')
        // this.userInfo = JSON.parse(cache.getSession('userInfo'))
        if(this.token){
            this.refresh()
        }else{
            this.token = '';
            this.userInfo = {};
            this.imgUrl = '';
        }
    },
    computed:{
        ...mapState('app', [
          'isShowLoginModal'
        ]),
        swiper(){
            return this.$refs.mySwiper.swiper
        }
    },
    watch:{
        isShowLoginModal(val){
            if(!val && cache.getLocal('token')){
                this.refresh()
            }
        }
    },
    methods:{
        ...mapActions('user', [
            'get_userInfo_data'
        ]),
        ...mapMutations('app', [
            'set_isShowLoginModal'
        ]),
        init(){
            // 用户信息
            this.get_userInfo_data().then(res => {
                this.userInfo = res
                this.imgUrl = require(`../../assets/lv${this.userInfo.userGrade}.png`)
                this.curLevel = this.userInfo.userGrade
                this.curGrade = this.gradeList[this.curLevel-1]
                this.token = this.userInfo.token;

                if(this.userInfo.gradeValidityTime){
                    this.time = parseTime(this.userInfo.gradeValidityTime).split(' ')[0] + '到期'
                    var time = this.userInfo.gradeValidityTime - 30 * 24 * 60 * 60 * 1000
                    if(new Date().getTime() >= time  ){
                        this.isShow = true
                    }
                }
            })
        },
        refresh(){
            RefreshToken().then(res => {
                if( res.code == 200 ){
                    // 当前token有效
                    this.init();
                }else{
                    // 当前token无效
                    this.token = '';
                    this.userInfo = {};
                    cache.setLocal('token', '');
                }
            })
        },
        toRealName(){
            if(this.token){
                // 驳回 || 未实名
                if( this.userInfo.realState == '1' || this.userInfo.realState == '4' ){
                    this.$router.push({
                        path:'/account/realName',
                        query:{ 
                            realState: this.userInfo.realState,
                            rejectDesc: this.userInfo.rejectDesc
                        }
                    })
                }
            }else{
                this.set_isShowLoginModal(true)
            }
        },
        toPurchase(type,level){
            if(this.token){
                this.$router.push({
                    path:'/account/purchase',
                    query:{
                        level: (type == '1')?this.userInfo.userGrade:level
                    }
                })
            }else{
                this.set_isShowLoginModal(true)
            }
        },
        toHref(path){
            if(this.token){
                this.$router.push(path)
            }else{
                this.set_isShowLoginModal(true)
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    overflow:hidden;
    .wrapperin{
        height:100%;
        padding-top:15px;
        overflow:scroll;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
        .header{
            margin: 0 15px;
            color:#666;
            .inner{
                width:100%;
                height:45px;
                position:relative;
                .photo{
                    width:45px;
                    height:45px;
                    border-radius:50%;
                    display:inline-block;
                    img{
                        width:45px;
                        height:45px;
                        border-radius:50%;
                        display:inline-block;
                    }
                }
                .laba{
                    width:25px;
                    height:25px;
                    display:inline-block;
                    position:absolute;
                    top:10px;
                    right:0;
                    img{
                        width:25px;
                        height:25px;
                        display:inline-block;
                        position:absolute;
                    }
                    span{
                        width:10px;
                        height:10px;
                        border-radius:50%;
                        display:inline-block;
                        background:#F52C09;
                        position:absolute;
                        top:0px;
                        right:2px;
                    }
                }
                .info{
                    position:absolute;
                    top:50%;
                    left:50px;
                    right:30px;
                    transform:translateY(-50%);
                    div{
                        max-width: 90%;
                        font-size: 13px;
                        span{
                            display:inline-block;
                        }
                        .name{
                            font-size:16px;
                        }
                        img{  
                            display:inline-block;
                            width:22px;
                            height:22px;
                            vertical-align: bottom;
                        }
                        .time{
                            color:#999999;
                            font-size:13px;
                            height:20px;
                        }
                        .btn{
                            width:75px;
                            height:20px;
                            text-align:center;
                            background:rgba(95,136,255,0.3);
                            border-radius:10px
                            color:#fff;
                            margin-left:10px;
                            position:relative;
                            top:4px;
                            span{
                                width:100%;
                                position:absolute;
                                top:50%;
                                left:50%;
                                transform:translate(-50%,-50%);
                                color:#fff;
                            }
                        }
                    }
                }
            }
        }
        .content{
            padding-bottom:50px;
            .swiper{
                .swiper-container{
                    .swiper-slide{
                        width: 75%;
                        padding: 20px 15px;
                        background: #fff;
                        &.swiper-slide-active{
                            transform:scale(1.1);
                            transition: 200ms transform;
                        }
                        .img{
                            display: block;
                            position:relative;
                            img{
                                border-top-left-radius: 5px;
                                border-top-right-radius: 5px;
                            }
                            .imgText{
                                color:#fff;
                                position:absolute;
                                top:17%;
                                left:10%;
                                height:65%;
                                .level{
                                    font-size:20px;
                                }
                                .bottom{
                                    position:absolute;
                                    bottom:3%;
                                    left:0;
                                    .number{
                                        position:relative;
                                        font-size:18px;
                                        padding-left:25px;
                                        &:before{
                                            content: '';
                                            display:inline-block;
                                            width:20px;
                                            height:20px;
                                            position:absolute;
                                            top:50%;
                                            left:0;
                                            transform:translateY(-50%);
                                            background:url(../../assets/coin.png) no-repeat 0 0;
                                            background-size:100% 100%;
                                        }
                                    }
                                }
                            }
                        }
                        .info{
                            padding:13px 10px 13px 15px;
                            border-radius:5px;
                            box-shadow:0px 5px 7px 0px rgba(218,218,218,0.68);
                            img{
                                display:inline-block;
                                width:22px;
                                height:22px;
                                margin-right:5px;
                                vertical-align:bottom;
                            }
                            .su{
                                display:inline-block;
                                font-size:16px;
                                height: 22px;
                                line-height: 22px;
                            }
                            .btn{
                                display:inline-block;
                                width:85px;
                                height:22px;
                                float:right;
                                border-radius:11px;
                                position:relative;
                                span{
                                    width:100%;
                                    position:absolute;
                                    top:50%;
                                    left:50%;
                                    transform:translate(-50%,-50%);
                                    text-align:center;
                                    color:#fff;
                                }
                            }
                            &.level1{
                                .su{
                                    color: #F3886B;
                                }
                                .btn{
                                    background:linear-gradient(90deg,rgba(243,135,106,1),rgba(253,189,158,1));
                                }
                            }
                            &.level2{
                                .su{
                                    color: #406482;
                                }
                                .btn{
                                    background:linear-gradient(90deg,rgba(172,201,222,1),rgba(57,94,125,1));
                                }
                            }
                            &.level3{
                                .su{
                                    color: #ECAE4A;
                                }
                                .btn{
                                    background:linear-gradient(90deg,rgba(251,216,134,1),rgba(235,172,70,1));
                                }
                            }
                            &.level4{
                                .su{
                                    color: #525E6C;
                                }
                                .btn{
                                    background:linear-gradient(90deg,rgba(155,161,168,1),rgba(80,92,106,1));
                                }
                            }
                            &.level5{
                                .su{
                                    color: #5B6582;
                                }
                                .btn{
                                    background:linear-gradient(90deg,rgba(165,175,202,1),rgba(89,99,128,1));
                                }
                            }
                            &.level6{
                                .su{
                                    color: #7856B9;
                                }
                                .btn{
                                    background:linear-gradient(90deg,rgba(194,170,255,1),rgba(117,84,182,1));
                                }
                            }
                        }
                    }
                }
            }
            .dataPanel{
                padding: 10px 15px;
                background: #F4F5FA;
                .panel{
                    display:flex;
                    height:75px;
                    background:#fff;
                    border-radius:5px;
                    padding: 15px 0;
                    .panel-item{
                        flex:1;
                        text-align:center;
                        position:relative;
                        &:before{
                            content: '';
                            width:1px;
                            height:20px;
                            background:#DBDDE8;
                            position:absolute;
                            top:10px;
                            right:0;
                        }
                        &:last-child{
                            &:before{
                                width:0px;
                            }
                        }
                        div{
                            &:first-child{
                                margin-bottom:10px;
                                font-size:12px;
                                color:#B3B3B3;
                            }
                            &:last-child{
                                font-size:16px;
                                color:#333333;
                                font-weight:bold;
                            }
                            img{
                                width:22px;
                                height:22px;
                                display:inline-block;
                                vertical-align:middle;
                                margin-right:10px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
